<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我们</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav>
        <div class="logo1">
            <img src="tupian/为人民服务.jpg" alt="宿舍 logo" class="logo-img">
        </div>
        <div class="logo">我们的宿舍</div>
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="宿舍成员.html">宿舍成员</a></li>
            <li><a href="宿舍故事.html">宿舍故事</a></li>
            <li><a href="关于我们.html">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>

    <!-- 关于我们 -->
    <section id="about-us" class="about-us" style="background-color: #fff; padding: 40px 0; text-align: center;">
        <div class="container" style="max-width: 1200px; margin: 0 auto; padding: 2rem;">
            <h2 style="font-size: 36px; margin-bottom: 20px; color: #e09350;">关于我们</h2>
            <div class="about-container" style="display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; padding: 0 20px;">
                <div class="about-content" style="background-color: #f9f9f9; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 20px; width: calc(50% - 20px); margin-bottom: 20px;">
                    <h3 style="font-size: 24px; margin: 10px 0; color: #333;">网站简介</h3>
                    <p style="font-size: 16px; line-height: 1.5; margin: 10px 0; color: #666;">欢迎来到我们的宿舍网站！本网站旨在展示我们宿舍的日常生活、成员风采以及各种有趣的故事。</p>
                    <p style="font-size: 16px; line-height: 1.5; margin: 10px 0; color: #666;">通过这个平台，我们希望与更多朋友分享我们的快乐时光，同时也为大家提供一个交流和互动的空间。</p>
                    <p style="font-size: 16px; line-height: 1.5; margin: 10px 0; color: #666;">网站的主要功能包括：宿舍成员介绍、宿舍活动展示、留言板互动等。</p>
                    <p style="font-size: 16px; line-height: 1.5; margin: 10px 0; color: #666;">我们希望通过这些功能，让大家更好地了解我们这个温馨的小家。</p>
                </div>
                <div class="contact-info" style="background-color: #f9f9f9; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 20px; width: calc(50% - 20px); margin-bottom: 20px;">
                    <h3 style="font-size: 24px; margin: 10px 0; color: #333;">联系我们</h3>
                    <p style="font-size: 16px; line-height: 1.5; margin: 10px 0; color: #666;">如果您有任何意见或建议，欢迎随时与我们联系：</p>
                    <p style="font-size: 16px; line-height: 1.5; margin: 10px 0; color: #666;">管理员邮箱：<a href="mailto:admin@example.com" style="color: #e09350; text-decoration: none;">admin@example.com</a></p>
                    <p style="font-size: 16px; line-height: 1.5; margin: 10px 0; color: #666;">联系电话：<a href="tel:1234567890" style="color: #e09350; text-decoration: none;">123-456-7890</a></p>
                    <p style="font-size: 16px; line-height: 1.5; margin: 10px 0; color: #666;">我们期待您的反馈，以便我们不断改进和优化网站！</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 底部信息栏 -->
    <footer>
        <p>宿舍地址：XX大学XX宿舍楼XX房间</p>
        <p>联系方式：电话 / 邮箱</p>
        <div class="social-links">
            <a href="#">微信</a>
            <a href="#">微博</a>
            <a href="#">Instagram</a>
        </div>
        <p>© 2023 XX宿舍. 保留所有权利.</p>
    </footer>
</body>
</html>